import React, { useEffect, useState } from 'react'
import { Radio } from 'antd';
import type { RadioChangeEvent } from 'antd';
import styles from './index.less';
import Vehicle from './components/Vehicle';
import Material from './components/Material';
import { getDict } from '@/service/common/dict';
import { getAllParking } from '@/service/storage/archives';


const warehousing = () => {
  const [type, setType] = useState('vehicle');
  const [dictData, setDictData] = useState<any>();
  const [warehouseData, setWarehouseData] = useState<any>([]);

  /** 获取仓库列表 */
  const getWarehouseData = () => {
    getAllParking()
      .then((res: any) => {
        setWarehouseData(res.data)
      })
      .catch(() => {
        setWarehouseData([])
      });
  }

  useEffect(() => {
    getWarehouseData();
    getDict(
      {
        dictKeys: ['OUT_WAREHOUSE_STATUS', 'OUT_WAREHOUSE_TYPE',],
      },
      (res: any) => {
        setDictData(res)
      },
    );
  }, [])

  const onChange = (e: RadioChangeEvent) => {
    setType(e.target.value);
  };

  return <div className={styles.outDepot}>
    <div className={styles.hender}>
      <Radio.Group onChange={onChange} value={type} optionType="button"
        buttonStyle="solid">
        <Radio value='vehicle'>车辆</Radio>
        <Radio value='material'>物料</Radio>
      </Radio.Group>
    </div>
    <div className={styles.content}>
      {
        type === 'vehicle' ? <Vehicle dictData={dictData} warehouseData={warehouseData} /> : <Material dictData={dictData} warehouseData={warehouseData} />
      }
    </div>
  </div>
};

export default warehousing